<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>系统设置</el-breadcrumb-item>
				<el-breadcrumb-item>编辑收款</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="payType" label="转账类型">
								<el-radio-group v-model="model.payType" @change="model.bankName=null">
									<el-radio label="银行卡">银行卡</el-radio>
									<el-radio label="微信">微信</el-radio>
									<el-radio label="支付宝">支付宝</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item prop="fullName" label="收款人姓名">
								<el-input v-model="model.fullName" placeholder="必填，收款人的真实姓名"></el-input>
							</el-form-item>
							<el-form-item prop="bankName" label="开户银行" v-if="model.payType=='银行卡'">
								<el-input v-model="model.bankName" placeholder="必填，开户银行名称"></el-input>
							</el-form-item>
							<el-form-item prop="accountNo" label="收款账号">
								<el-input v-model="model.accountNo" placeholder="必填，收款人的收款账号"></el-input>
							</el-form-item>
							<el-form-item label="收款二维码">
								<dt-upload v-model="model.qrCode"></dt-upload>
							</el-form-item>
							<el-form-item label="创建时间" v-if="model.id>0">
								{{model.addBy}} {{model.addTime}}
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../../components/DtUpload.vue'
	export default {
		components: {
			DtUpload
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info',//当前选项卡
				labelPosition: 'right',//表单对齐方式
				loading: false,
				model: {
					id: 0,
					merchantId : 0,
					payType: null,
					fullName: null,
					bankName: null,
					accountNo: null,
					qrCode: null,
					addBy: null,
					addTime: null,
				},
				rules: {
					payType: [
						{ required: true, message: '请选择转账类型', trigger: 'change' }
					],
					fullName: [
						{ required: true, message: '请输入收款人姓名', trigger: 'blur' }
					],
					bankName: [
						{ required: true, message: '请输入开户银行名称', trigger: 'blur' }
					],
					accountNo: [
						{ required: true, message: '请输入收款账号', trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this;
				if (_this.id) {
					_this.$api.request({
						url: `/merchant/payinfo/${_this.id}`,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this;
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve();
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: `/merchant/payinfo/${_this.model.id}`,
							data: _this.model,
							successMsg: '修改收款方式已成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								_this.$common.linkUrl('/merchant/payinfo/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/merchant/payinfo',
							data: _this.model,
							successMsg: '新增收款方式已成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
		},
		created() {
			//初始化数据
			this.initData();
		}
	}
</script>